<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="icon" href="../images/title.png" sizes="32x32">
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css"
          media="screen"/>
    <link rel="StyleSheet" href="../css/searchProduct.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/IncludeTop">
</div>
<div id="Content">
    <div id="BackLink">
        <a href="/catalog/view">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <div id="Cart">
            <h2>Shopping Cart</h2>
            <form action="updateCartQuantities" method="post">
                <table id="cartTable" align="center" >
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>

                    <!--购物车数量为0-->
                    <span th:if="${cart.getNumberOfItems() == 0}">
                        <tr>
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>
                    </span>

                    <!--购物车数量不为0，显示购物车-->
                    <tr th:each ="item:${cart.getCartItems()}">
                        <td>
                            <a th:href="'viewItem?itemId=' + ${item.getItem().getItemId()}" th:text="${item.getItem().getItemId()}"></a>
                        </td>
                        <td>
                            <span th:text="${item.getItem().getProductId()}"></span>
                        </td>
                        <td>
                            <span th:if="${item.getItem().getAttribute1()} != null" th:text="${item.getItem().getAttribute1()}"></span>
                            <span th:if="${item.getItem().getAttribute2()} != null" th:text="${item.getItem().getAttribute2()}"></span>
                            <span th:if="${item.getItem().getAttribute3()} != null" th:text="${item.getItem().getAttribute3()}"></span>
                            <span th:if="${item.getItem().getAttribute4()} != null" th:text="${item.getItem().getAttribute4()}"></span>
                            <span th:if="${item.getItem().getAttribute5()} != null" th:text="${item.getItem().getAttribute5()}"></span>
                            <span th:if="${item.getItem().getProduct().getName()} != null" th:text="${item.getItem().getProduct().getName()}"></span>
                        </td>
                        <td>
                            <label th:text="${item.isInStock()}" ></label>
                        </td>
                        <td>
                            <input type="text" th:name="${item.getItem().getItemId()}" th:value="${item.getQuantity()}" id="quantity" onblur="updateCart()"/> <!--onblur="updateCart();"-->
                        </td>

                        <td th:text="'$' + ${#numbers.formatDecimal(item.getItem().getListPrice(), 1, 2)}"></td>


                        <td th:text="${#numbers.formatDecimal(item.getTotal(), 1, 2)}"></td>

                        <td>
                            <a class="Button" id="remove" th:href="'/catalog/removeItem?workingItemId=' + ${item.getItem().getItemId()}">Remove</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <label>Sub Total:$<label id="subtotal" th:text=" ${#numbers.formatDecimal(cart.getSubTotal(), 1, 2)}" ></label></label>
                            <input type="submit" value="Update Cart" style="display:none">
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>

            <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

            <script type="text/javascript" src="../js/cartNumberUpdate.js"></script>

            <div th:if="${cart.numberOfItems > 0}">
                <a class="Button" th:href="@{'/catalog/checkout'}">Proceed to Checkout</a>

            </div>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>
</div>
<div th:replace="common/IncludeBottom">
</div>
</body>
</html>